<script setup lang="ts">

import { getTechs } from '@/stores/taiwu'
import { watchEffect, ref } from 'vue';

const dBooks = ref<{ kind: string, titles: string[] }[]>([])

watchEffect(async () => {
  dBooks.value = await getTechs()
})
</script>

<template>
  <div class="container mx-auto max-w-2/3">
    <div class="flex flex-col gap-2">
      <div v-for="dBook in dBooks" :key="dBook.kind" class="flex flex-row gap-2">
        <div>{{ dBook.kind }}</div>
        <div class="grid grid-cols-9 gap-2 grow text-center">
          <div v-for="(title, ii) in dBook.titles" :key="title" class="tw-lv px-1 rounded" :class="`lv${9 - ii}`">
            {{ title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
